<template>
  <div class="list">
    <table class="tb">
      <tr>
        <th>
          <input type="checkbox" />
        </th>
        <th>产品图片</th>
        <th>编号</th>
        <th>品牌名称</th>
        <th>价格</th>
        <th>数量</th>
        <th>总计</th>

        <th>操作</th>
      </tr>
      <tr v-for="item in data" :key="item.id">
        <td>
          <input type="checkbox" />
        </td>
        <td>
          <img :src="item.imgSrc" width="50" height="50" alt="" />
        </td>
        <td>
          {{ item.code }}
        </td>
        <td>
          {{ item.productName }}
        </td>
        <td>
          {{ item.price }}
        </td>
        <td>
          <button v-dis:[item.count] @click="decreaseCount(item)">-</button>
          &nbsp;
          {{ item.count }}
          &nbsp;
          <button @click="increaseCount(item)">+</button>
        </td>
        <td>
          {{ item.total }}
        </td>
        <td>
          <button @click="del(item.id)">删除</button>
        </td>
      </tr>
    </table>
    <div class="add" v-show="!data.length" :style="{ textAlign: 'center' }">
      没有更多数据了
    </div>
    <div class="add" v-show="data.length" :style="{ textAlign: 'right' }">
      总价格:
      <h1 :style="{ color: 'red' }">{{ tot }}</h1>
    </div>
  </div>
</template>

<script>
export default {
  props: ["data"],
  computed: {
    tot() {
      return this.data
        .reduce((total, item) => {
          //    parseFloat(item.total)
          return (total += parseFloat(item.total));
        }, 0)
        .toFixed(2);
    },
  },
  directives: {
    dis: {
      inserted(el, binding) {
        if (binding.arg === 1) {
          el.disabled = true;
        }
      },
      update(el, binding) {
        if (binding.arg > 1) {
          el.disabled = false;
        } else {
          el.disabled = true;
        }
      },
    },
  },
  methods: {
    del(id) {
      console.log(id);
      this.$emit("del", id);
    },
    zongjia(item) {
      item.total = item.price * item.count;
      item.total = item.total.toFixed(2);
    },
    decreaseCount(item) {
      item.count--;
      // if(item.count<=1) {
      //     item.count=1
      // }
      this.zongjia(item);
    },

    increaseCount(item) {
      item.count++;
      this.zongjia(item);
    },
  },
};
</script>
